<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="补卡记录"></u-navbar>
		<view class="d-p-30">
			<view><text class="d-font-36" style="font-weight: bold;">补卡列表</text></view>

			<view class="card d-m-t-30 d-p-30" v-for="(item, index) in list" :key="index">
				<view class="d-flex" style="color: #5D6672;">
					<view class="d-flex-1 d-font-28">
						<text style="font-weight: bold;">姓名</text>
						<text class="d-m-l-20">{{ item.xm }}</text>
					</view>
					<view class="d-font-28" style="width: 260rpx;">
						<text style="font-weight: bold;">性别</text>
						<text class="d-m-l-20">{{ item.xb }}</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<view class="d-flex-1 d-font-28">
						<text style="font-weight: bold;">工种</text>
						<text class="d-m-l-20">{{ item.jsgz_label }}</text>
					</view>
					<view class="d-font-28" style="width: 260rpx;">
						<text style="font-weight: bold;">班组名称</text>
						<text class="d-m-l-20">{{ item.bzmc }}</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<view class="d-flex-1 d-font-28">
						<text style="font-weight: bold;">证件号码</text>
						<text class="d-m-l-20">{{ item.zjhm | str }}</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<view class="d-flex-1 d-font-28">
						<text style="font-weight: bold;">项目名称</text>
						<text class="d-m-l-20">{{ item.xmmc }}</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<view class="d-flex-1 d-font-28">
						<text style="font-weight: bold;">补卡日期</text>
						<text class="d-m-l-20">{{ item.bksj }}</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<view class="d-flex-1 d-font-28">
						<text style="font-weight: bold;">补卡原因</text>
						<text class="d-m-l-20">{{ item.bkyy }}</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<view class="d-flex-1 d-font-28">
						<text style="font-weight: bold;">补卡类型</text>
						<text class="d-m-l-20">{{ item.bklx == 1 ? '入场' : '离场' }}</text>
					</view>
					<view class="d-font-28" style="width: 260rpx;">
						<text style="font-weight: bold;">业务状态</text>
						<text
							class="d-m-l-20"
							:style="{
								color: _color(item)
							}"
						>
							{{ item.ywzt | statusTxt }}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { rykqBkList } from '../../../common/api.js';
export default {
	data() {
		return {
			list: [],
			pageNum: 1,
			pageSize: 20,
			pageLast: 1,
			rybh: null
		};
	},
	filters: {
		statusTxt(e) {
			if (e == 0) {
				return '办结';
			} else if (e == 1) {
				return '临时';
			} else if (e == 2) {
				return '注销';
			} else {
				return '待审核';
			}
		}
	},
	onLoad(e) {
		this.rybh = e.rybh;
		this.init();
	},
	onReachBottom() {
		if (this.pageNum < this.pageLast) {
			++this.pageNum;
			this.getWagesList().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			this.pageNum = 1;
			this.getData().then(e => {
				this.list = e.rows;
				this.pageLast = Math.ceil(e.total / this.pageSize);
				uni.hideLoading();
			});
		},
		getData() {
			return rykqBkList({
				params: {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					rybh: this.rybh
				}
			});
		}
	},
	computed: {
		_color() {
			return function(item) {
				try {
					return ['#999999', '#f0ad4e', '#dd524d', '#007aff'][item.ywzt];
				} catch (e) {
					return '';
				}
			};
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
}
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
}
</style>
